<template>
    <div
        class="line-numbers md-theme--here"
        data-prismjs-copy="复制代码"
        data-prismjs-copy-error="复制失败，请手动复制（Ctrl+C）"
        data-prismjs-copy-success="代码已复制"
        v-html="renderContent"
    ></div>
</template>

<script>
    import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
    import Prism from 'prismjs';
    import MarkdownIt from 'markdown-it';
    import Emoji from 'markdown-it-emoji';
    import sub from 'markdown-it-sub';
    import sup from 'markdown-it-sup';
    import deflist from 'markdown-it-deflist';
    import abbr from 'markdown-it-abbr';
    import footnote from 'markdown-it-footnote';
    import insert from 'markdown-it-ins';
    import mark from 'markdown-it-mark';
    import container from 'markdown-it-container';
    import '@/assets/style/var.scss';

    Prism.manual = true;

    @Component
    export default class MarkdownView extends Vue {
        @Prop() content;

        render = new MarkdownIt()
            .use(Emoji)
            .use(sub)
            .use(sup)
            .use(deflist)
            .use(abbr)
            .use(footnote)
            .use(insert)
            .use(mark)
            .use(container);

        get renderContent() {
            return this.render.render(this.content);
        }

        @Watch('content', { immediate: true, deep: true })
        async onContentChanged() {
            await this.$nextTick();
            Prism.highlightAll();
        }
    }
</script>
